<template>
	<view style="padding: 15px;">

		<u--form labelPosition='top' labelWidth='700rpx' :model="formState" name="basic" layout="horizontal"
			:labelCol="{span:7}" :wrapperCol="{span: 13, offset: 0}">
			<u-collapse :value="['1','2']">
				<!-- <u-collapse-item name="1" title="点位信息" icon="https://project.gxrunxiang.com/cdn/cell.png"> -->
				<u-form-item label="设备名称" name="Name" :required="true">
					<u--input v-model="formState.Name" />
				</u-form-item>
				<u-form-item label="Mac地址" name="Addr">
					<u--input v-model="formState.Addr" />
				</u-form-item>
				<!-- <u-form-item label="编号"  name="No" >
						<u--input type='number' allow-half v-model="formState.No"/>
					</u-form-item> -->
				<u-form-item label="类型" @click="showpicker=true" :required="true" name="Type">
					<u--input v-model="formState.Type" disabledColor="#ffffff" disabled />
				</u-form-item>
				<!-- <u-form-item label="端口数" name="Points" >
						<u--input allow-half v-model="formState.Points" />
					</u-form-item> -->
				<u-form-item label="型号" name="Model">
					<u--input allow-half v-model="formState.Model" />
				</u-form-item>
				<u-form-item label="起始U(从下往上)" name="U">
					<u--input allow-half v-model="formState.U" />
				</u-form-item>
				<u-form-item label="结束U" name="U2">
					<u--input allow-half v-model="formState.U2" />
				</u-form-item>
				<u-form-item label="机柜编号" name="ShelfNo">
					<u--input allow-half v-model="formState.ShelfNo" />
				</u-form-item>
				<u-form-item label="横向" name="x" >
					<u--input allow-half v-model="formState.x" :disabled="canChange"/>
				</u-form-item>
				<u-form-item label="纵向" name="y" >
					<u--input allow-half v-model="formState.y" :disabled="canChange"/>
				</u-form-item>
				<u-form-item label="备注" name="Remark">
					<u--input allow-half v-model="formState.Remark" />
				</u-form-item>
				<!-- 					<u-form-item label="纬度" name="Lat" :rules="[{ required: true, message: '请输入值' }]">
						<u--input allow-half v-model="formState.Lat" :min="0"/>
					</u-form-item>
					<u-form-item label="经度" name="Lng" :rules="[{ required: true, message: '请输入值' }]">
						<u--input allow-half v-model="formState.Lng" :min="0"/>
					</u-form-item> -->
				<u-form-item label="位于机柜前后" name="IsFront" >
					<u-radio-group v-model="formState.IsFront" placement="row" @change="groupChange" iconSize="18px" labelSize="18px">
						<u-radio :customStyle="{marginBottom: '4px'}" label="前" name="前"></u-radio>
						<u-radio :customStyle="{marginBottom: '4px', marginLeft: '8px'}" label="后" name="后"></u-radio>
					</u-radio-group>
				</u-form-item>	
				<u-action-sheet :show="showpicker" :actions="columns" title="请选择类型" @close="showpicker = false"
					@select="typeSelect">
				</u-action-sheet>
				</u-collapse-item>

				<u-collapse-item name="2" title="设备照片" icon="https://project.gxrunxiang.com/cdn/image.png">
					<u-upload :sizeType="['compressed']" :fileList="fileList1" @afterRead="afterRead"
						@delete="deletePic" name="1" multiple :maxCount="1000"></u-upload>
					<u-album :urls="imagesurls1"></u-album>
				</u-collapse-item>
			</u-collapse>
		</u--form>
		<br>
		<p>
			<u-button type="primary" text="保存" @click="save"></u-button>
		</p>
		<u-notify ref="uNotify"></u-notify>
	</view>
</template>

<script>
	import {
		baseUrl
	} from '@/common/config.js'
	import {
		mapGetters
	} from 'vuex'

	import {
		addlineequ,
		GetListByParent,
		guid,
		getlineequlist,
		LineequUpdate,
		getfilebyoutid,
	} from '@/common/api.js'
	export default {
		data() {
			return {
				userinfo: {},
				formState: {IsFront:'前'},
				fileList1: [],
				buildid: null,
				imagesurls1: [],
				id: null,
				canChange: true,
				notifyData: {
					message: '保存成功',
					type: 'success',
					color: '#ffffff',
					bgColor: '',
					fontSize: 15,
					duration: 3000,
					safeAreaInsetTop: false
				},
				columns: [],
				showpicker: false,
				changeId: "",
				ischange: false,
			}
		},
		onLoad(option) {
			this.userinfo = JSON.parse(uni.getStorageSync("$userinfo"))
			GetListByParent("设备类型", this.columns)
			if (option.Id) {
				this.ischange = true
				this.changeId = option.Id
				this.getchangelist();
				getfilebyoutid(option.Id).then(res => {
					console.log(res);
					for (var i = 0; i < res.length; i++) {
						if (res[i].MyType == '设备照片') {
							this.imagesurls1.push(`${baseUrl}/SysFile/download?id=${res[i].Id}`)
						}
					}
					setTimeout(() => {
							// console.log(this.$refs.coll)
							this.$refs.coll.init()
						},
						1000)
				})
			} else {
				this.formState.Id = guid()
				this.formState.NodeId = option.NodeId
			}
		},
		computed: {
			...mapGetters(['user']),
		},
		methods: {
			save() {
				// this.formState.Buildid=this.buildid
				// uni.setStorageSync("temppoint", JSON.stringify(this.formState))
				if(this.formState.x && this.formState.y){
					this.formState.NxM = this.formState.x + ',' + this.formState.y
				}
				if (this.ischange) {
					LineequUpdate(this.formState).then(res => {
						this.$refs.uNotify.show(this.notifyData)
						uni.redirectTo({
							url: `/pages/index/Protect/lineequdetail?Id=${this.formState.Id}`
						})
					})
				} else {
					addlineequ(this.formState).then(res => {
						this.$refs.uNotify.show(this.notifyData)
						uni.redirectTo({
							url: `/pages/index/Protect/lineequlist?NodeId=${this.formState.NodeId}`
						})
					})
				}
			},
			typeSelect(e) {
				this.formState.Type = e.name
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				// console.log(this.user.Id)
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: `${baseUrl}/SysFile/upload?outid=${this.formState.Id||this.userinfo.Id}&type=设备照片`,
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						header: {
							"Authorization": `Bearer ${this.$store.getters.$token}`
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			async getchangelist() {
				let para = {
					Parameters: [{
						FieldName: "Id",
						ConditionalType: "Equal",
						FieldValue: this.changeId
					}],
					orderBys: ["Id"],
				}
				await getlineequlist(para).then(res => {
					this.formState = res.data[0]
					if(this.formState.NxM){
						this.formState.x = res.data[0].NxM.split(',')[0]
						this.formState.y = res.data[0].NxM.split(',')[1]
						this.canChange = false
					}		
				})
			},
			groupChange(e){
				console.log(e);
			}
		}
	}
</script>

<style>

</style>